<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>面向对象 Tab</title>
    <link rel="stylesheet" href="./styles/tab.css">
    <link rel="stylesheet" href="./styles/style.css">
</head>

<body>

    <main>
        <h4>
            Js 面向对象 动态添加标签页
        </h4>
        <div class="tabsbox" id="tab">
            <!-- tab 标签 -->
            <nav class="fisrstnav">
                <ul>
                    <li class="liactive"><span class="f_head">测试1</span><span class="iconfont icon-guanbi"></span></li>
                    <li><span class="f_head">测试2</span><span class="iconfont icon-guanbi"></span></li>
                    <li><span class="f_head">测试3</span><span class="iconfont icon-guanbi"></span></li>
                </ul>
                <div class="tabadd">
                    <span>+</span>
                </div>
            </nav>

            <!-- tab 内容 -->
            <div class="tabscon">
                <section class="conactive">测试1</section>
                <section>测试2</section>
                <section>测试3</section>
            </div>
        </div>
    </main>
    <script>
        var that;
        class Tab {
            constructor(id) {
                that = this;
                this.main = document.querySelector(id);
                // this.lis = this.main.querySelectorAll('li');
                // querySelectorAll()获取不到新增的标签
                this.lis = this.main.getElementsByTagName('li');
                // this.sections = this.main.querySelectorAll('section');
                this.sections = this.main.getElementsByTagName('section')
                this.ul = this.main.querySelector('ul');
                this.add = this.main.querySelector('.tabadd span');
                this.tabscon = this.main.querySelector('.tabscon');
                this.closes = this.main.getElementsByClassName('iconfont');

                this.spans = this.main.getElementsByClassName('f_head');
                this.init();
            }
            // 页面初始化
            init() {
                for (var i = 0; i < this.lis.length; i++) {
                    this.lis[i].index = i;
                    this.lis[i].onclick = this.toggleTab;
                    this.closes[i].onclick = this.removeTab;
                    this.spans[i].ondblclick = this.editTab;
                    this.sections[i].ondblclick = this.editTab;
                }
                this.add.onclick = this.addTab;
            }
            // 清除class
            clearClassName() {
                for (var j = 0; j < this.lis.length; j++) {
                    this.lis[j].className = '';
                    this.sections[j].className = '';
                }
            };
            // 切换tab
            toggleTab() {
                that.clearClassName();
                this.className = 'liactive';
                that.sections[this.index].className = 'conactive';
            };
            // 添加tab
            addTab() {
                // 清除所有类
                that.clearClassName();
                // console.log(this.ul);
                var li = `<li  class="liactive"><span class="f_head">新增tab栏</span><span class="iconfont icon-guanbi"></span></li>`;
                that.ul.insertAdjacentHTML('beforeend', li);
                var section = `<section class="conactive">吧啦啦啦啦啊${Math.random()}</section>`;
                that.tabscon.insertAdjacentHTML('beforeend', section);

                // 重新渲染页面
                that.init();
            };
            // 删除tab
            removeTab(e) {
                // 阻止事件冒泡 防止点击删除图标触发li的点击事件
                e.stopPropagation(); var index = this.parentNode.index;
                that.lis[index].remove();
                that.sections[index].remove();
                that.init();
                // 当我们删除的不是选中状态的li 让选中状态的li不变
                if (document.querySelector('.liactive')) return;

                // 当我们删除选中状态的li 就让前一个li选中
                index--;
                that.lis[index] && that.lis[index].click();
            };
            // 修改tab
            editTab() {
                // 禁止选文字
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                this.innerHTML = `<input type="text" value="${this.innerText}" />`
                // 默认选中文本框的文字
                this.children[0].select();
                // 鼠标离开input 更换span中的文字
                this.children[0].onblur = function () {
                    this.parentNode.innerHTML = this.value;
                }

                // 按下回车键 也可以更换span的文字
                this.onkeyup = function (e) {
                    if (e.keyCode == 13) {
                        this.children[0].blur();
                    }
                }
            };
        }
        new Tab('#tab');
    </script>

    <!-- <script src="js/tab.js"></script> -->
</body>

</html>